<script setup>
import { onMounted, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { QuillEditor } from '@vueup/vue-quill'
import { addNewsServe, getNewsServe, putNewsServe } from '@/api/news.js'
import { userStore } from '@/stores/user.js'
import newsMsg from '@/components/newsMsg.vue'

const useStore = userStore()
defineOptions({
  name: 'AppNews'
})

const datas = ref({})
const loading = ref(false)
const getNewsList = async () => {
  loading.value = true
  datas.value = await getNewsServe(pageSetting.value)
  setTimeout(() => (loading.value = false), 500)
  console.log(datas.value.data.list)
}
onMounted(() => getNewsList())
const pageSetting = ref({
  size: 5,
  page: 1
})

const handleSizeChange = async (i) => {
  pageSetting.value.size = i
  getNewsList()
}
const hanldeCurrentChange = (pageNum) => {
  pageSetting.value.page = pageNum
  getNewsList()
}
const drawerShow = ref(false)
const rules = ref({
  newstitle: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  newscontent: [{ required: true, message: '请输入内容', trigger: 'blur' }],
  image: [{ required: true, message: '请上传图片', trigger: 'blur' }]
})
const quEditor = ref(null)
const data = ref({
  createtime: '',
  isdelete: 0,
  loginname: '',
  modifytime: '',
  newstitle: '',
  newscontent: '',
  newstype: 0,
  readcount: 0,
  extra: '# 测试发布内容',
  image: '',
  file: ''
})

const show = () => {
  isEdit.value = false
  drawerShow.value = true
  data.value = {
    createtime: '',
    isdelete: 0,
    loginname: '',
    modifytime: '',
    newstitle: '',
    newscontent: '',
    newstype: 0,
    readcount: 0,
    extra: '# 测试发布内容',
    image: '',
    file: ''
  }
  quEditor.value?.setHTML('')
}

const form = ref(null)

const addImages = (obj) => {
  data.value.image = URL.createObjectURL(obj.raw)
  data.value.file = obj.raw
}

const addNews = async () => {
  await form.value.validate()
  data.value.loginname = useStore.userInfo.token
  const formDa = new FormData()
  for (let i in data.value) formDa.append(i, data.value[i])
  if (!isEdit.value) {
    console.log(await addNewsServe(formDa))
    ElMessage.success('发布成功')
  } else {
    const res = await putNewsServe(formDa)
    if (res.data.code === 200) ElMessage.success(res.data.msg)
    else ElMessage.error(res.data.msg)
  }
  getNewsList()
}
const isEdit = ref(false)
const putNews = (item) => {
  isEdit.value = true
  drawerShow.value = true
  data.value = item
  data.value.image = item.image
  quEditor.value?.setHTML(item.newscontent)
}
const cancle = () => {
  drawerShow.value = false
  getNewsList()
}
</script>

<template>
  <div style="background-color: #f1f2f6" v-if="datas.data">
    <img src="@/assets/img/xinwenzhongxin.png" class="img-fluid" alt="" />

    <div class="bg-white p-4 m-4">
      <el-breadcrumb>
        <el-breadcrumb-item to="/home"
          ><img
            src="@/assets/img/mianbaoxue_shouye.png"
            alt=""
          />首页</el-breadcrumb-item
        >
        <el-breadcrumb-item to="/news">新闻中心</el-breadcrumb-item>
        <el-breadcrumb-item
          >企业咨询</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="bg-white mx-4 p-4">
      <div>
        <div class="d-flex justify-content-end my-4">
          <el-button type="info"
            >企业咨询</el-button
          >
          <el-button type="info">行业动态</el-button>
          <el-button @click="show" type="primary">添加新闻</el-button>
        </div>
        <div v-loading="loading">
          <news-msg
            v-for="value in datas.data.list"
            :key="value.id"
            :item="value"
            @flush="getNewsList"
            @put="putNews"
          ></news-msg>
        </div>
        <div class="d-flex justify-content-end">
          <el-pagination
            background
            :page-sizes="[1, 3, 5, 10]"
            layout="total, sizes, prev, pager, next, jumper"
            v-model:page-size="pageSetting.size"
            :total="datas.data.total"
            @size-change="handleSizeChange"
            @current-change="hanldeCurrentChange"
            class="mt-4"
          />
        </div>
      </div>
    </div>
    <el-drawer
      v-model="drawerShow"
      :title="isEdit ? '编辑新闻' : '添加新闻'"
      size="50%"
    >
      <template #default>
        <el-form :rules="rules" :model="data" ref="form">
          <el-form-item prop="newstitle" label="新闻标题:">
            <el-input
              v-model="data.newstitle"
              placeholder="请输入新闻标题"
            ></el-input>
          </el-form-item>
          <el-form-item prop="image" label="新闻封面:">
            <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              :auto-upload="false"
              action="#"
              :on-change="addImages"
            >
              <img
                v-if="data.image"
                width="200"
                :src="data.image"
                class="avatar"
              />
              <el-icon size="80" v-else class="avatar-uploader-icon"
                ><Plus
              /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item prop="newscontent" label="新闻内容:">
            <div>
              <quill-editor
                ref="quEditor"
                theme="snow"
                content-type="html"
                v-model:content="data.newscontent"
              ></quill-editor>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="d-flex justify-content-center w-100">
              <el-button type="primary" @click="addNews">{{
                isEdit ? '保存' : '添加'
              }}</el-button>
              <el-button type="info" @click="cancle">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </template>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.avatar-uploader-icon {
  color: gray;
  border: 1px dashed gray;
}
.avatar-uploader-icon:hover {
  border: 1px dashed rgb(0, 38, 252);
}

</style>
